Node / public / micron-parser-js rns://4cf8a0651c4d73cacd0f93ac1d95e80a/public/micron-parser-js

󰉖 Files • 󱌣 Work (0) • 󰋚 Commits (91) • 󰘬 Branches (1) • 󰓼 Tags (0) • 󰋑 Thanks (1) •  Stats

Micron Parser JS requires DOMpurify for HTML/XSS sanitization. To install DOMpurify, include it with your script tags above micron-parser.js or install via a package manager like NPM T383838npm install micron-parser

T282828

Tff7b72import Te6edf3MicronParser Tff7b72from Ta5d6ff'./js/micron-parser.js'Tb4b4b4;

T8b949e// Create a new parser (darkTheme = true/false | defaults to true, forceMonospace = true/false | defaults to true)

Tff7b72const Te6edf3parser Tff7b72= Tff7b72new Te6edf3MicronParserTb4b4b4(Tff7b72trueTb4b4b4, Tff7b72trueTb4b4b4)Tb4b4b4;

T8b949e// Input Micron markup

Tff7b72const Te6edf3micronMarkup Tff7b72= Ta5d6ff`

Ta5d6ff> Example Heading

This is a simple line in Micron.

Ta5d6ff`Tb4b4b4;

T8b949e// Convert Micron to an HTML string

Tff7b72const Te6edf3htmlOutput Tff7b72= Te6edf3parserTb4b4b4.Te6edf3convertMicronToHtmlTb4b4b4(Te6edf3micronMarkupTb4b4b4)Tb4b4b4;

T8b949e// Insert it into your page

Tffa657documentTb4b4b4.Te6edf3getElementByIdTb4b4b4(Ta5d6ff'yourElement'Tb4b4b4)Tb4b4b4.Te6edf3innerHTML Tff7b72= Te6edf3htmlOutputTb4b4b4;

T8b949e// Or create a DocumentFragment from Micron

Tff7b72const Te6edf3domFragment Tff7b72= Te6edf3parserTb4b4b4.Te6edf3convertMicronToFragmentTb4b4b4(Te6edf3micronMarkupTb4b4b4)Tb4b4b4;

T8b949e// and append it to the DOM

Tffa657documentTb4b4b4.Te6edf3bodyTb4b4b4.Te6edf3appendChildTb4b4b4(Te6edf3domFragmentTb4b4b4)Tb4b4b4;

Micron-parser-js supports embedded partials The syntax is BT383838 {urlT383838refreshfields} BT383838 where refreshT383838 is the seconds between reloads (must be >= 1T383838) and fieldsT383838 is a |T383838-separated list. A pid=<id>field gives the partial a stable identity for tracking across refreshes.

The parser emits a placeholder T383838<div class="Mu-partial">⧖</div> with all the parsed metadata as T383838data-* attributes. Wire it up with T383838MicronParser.bindPartials(root, fetcher, options?) in your application logic:

T282828

Tff7b72const Te6edf3root Tff7b72= Tffa657documentTb4b4b4.Te6edf3getElementByIdTb4b4b4(Ta5d6ff'output'Tb4b4b4)Tb4b4b4;

Te6edf3rootTb4b4b4.Te6edf3innerHTML Tff7b72= Te6edf3parserTb4b4b4.Te6edf3convertMicronToHtmlTb4b4b4(Te6edf3micronMarkupTb4b4b4)Tb4b4b4;

Tff7b72const Te6edf3cleanup Tff7b72= Te6edf3MicronParserTb4b4b4.Te6edf3bindPartialsTb4b4b4(Te6edf3rootTb4b4b4, Tff7b72async Tb4b4b4(Tb4b4b4{ Te6edf3destinationTb4b4b4, Te6edf3fieldsTb4b4b4, Te6edf3idTb4b4b4, Te6edf3signal Tb4b4b4}Tb4b4b4) Tb4b4b4=> Tb4b4b4{

Tff7b72const Te6edf3res Tff7b72= Tff7b72await Te6edf3fetchTb4b4b4(Ta5d6ff`Ta5d6ff/proxy?path=Tffd700${Tffa657encodeURIComponentTb4b4b4(Te6edf3destinationTb4b4b4)Tffd700}Ta5d6ff`Tb4b4b4, Tb4b4b4{ Te6edf3signal Tb4b4b4}Tb4b4b4)Tb4b4b4;

Tff7b72return Tff7b72await Te6edf3resTb4b4b4.Te6edf3textTb4b4b4(Tb4b4b4)Tb4b4b4; T8b949e// returned as innerHTML; may also return a Node or { markup: string }

Tb4b4b4}Tb4b4b4)Tb4b4b4;

T8b949e// when the view is torn down:

Te6edf3cleanupTb4b4b4(Tb4b4b4)Tb4b4b4;

Pass T383838{ accessibility: true } as the third option to add screen reader / aria labels to the output.

• Headings: T383838role="heading" with T383838aria-level,

• Text dividers: T383838role="separator",

• text inputs: T383838aria-label from their Micron field name,

• table headers: T383838scope="col",

• partial placeholders: T383838role="status". T383838aria-live,, T383838aria-busy,

• forceMonospace characters get aria-hidden in the upper div block to avoid reading page elements like ASCII art or non-text content

T282828

Tff7b72const Te6edf3parser Tff7b72= Tff7b72new Te6edf3MicronParserTb4b4b4(Tff7b72trueTb4b4b4, Tff7b72trueTb4b4b4, Tb4b4b4{ Te6edf3accessibilityTff7b72: Tff7b72true Tb4b4b4}Tb4b4b4)Tb4b4b4;

Pass T383838{ serif: true } to render text in a serif font. The included default is Noto Serif Nerd Font. Anything in a literal () will still remain monospace, but text content will be rendered in a Serif font.

T282828

Tb4b4b4#T7ee787output Tb4b4b4{

Te6edf3--mu-serif-fontTb4b4b4: Ta5d6ff'Noto Serif Nerd Font'Tb4b4b4, Te6edf3GeorgiaTb4b4b4, Tff7b72serifTb4b4b4;

Te6edf3--mu-mono-fontTb4b4b4: Ta5d6ff'Roboto Mono Nerd Font'Tb4b4b4, Tff7b72monospaceTb4b4b4;

Tb4b4b4}

T282828

Tff7b72const Te6edf3parser Tff7b72= Tff7b72new Te6edf3MicronParserTb4b4b4(Tff7b72trueTb4b4b4, Tff7b72trueTb4b4b4, Tb4b4b4{ Te6edf3serifTff7b72: Tff7b72true Tb4b4b4}Tb4b4b4)Tb4b4b4;

For optimal display of Micron content in the browser it's recommended to use a monospaced font with NerdFont icon support, such as the ones provided here.